<script setup lang="ts">
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'

const mode = ref('day')
const value = ref(new Date().getTime())
const isToday = computed(() => {
  const date = new Date()
  const today = uni.$uv.timeFormat(date.getTime(), 'yyyy/mm/dd')
  return today === uni.$uv.timeFormat(value.value, 'yyyy/mm/dd')
})
const isYesterday = computed(() => {
  const date = new Date()
  const yesterday = uni.$uv.timeFormat(date.getTime() - 24 * 60 * 60 * 1000, 'yyyy/mm/dd')
  return yesterday === uni.$uv.timeFormat(value.value, 'yyyy/mm/dd')
})

const isThisMonth = computed(() => {
  const date = new Date()
  const thisMonth = uni.$uv.timeFormat(date.getTime(), 'yyyy/mm')
  return thisMonth === uni.$uv.timeFormat(value.value, 'yyyy/mm')
})
const isLastMonth = computed(() => {
  const date = new Date()
  const lastMonth = uni.$uv.timeFormat(date.getTime() - 24 * 60 * 60 * 1000 * 30, 'yyyy/mm')
  return lastMonth === uni.$uv.timeFormat(value.value, 'yyyy/mm')
})
function preStepDay() {
  const date = new Date(value.value)
  date.setDate(date.getDate() - 1)
  value.value = date.getTime()
}
function nextStepDay() {
  const date = new Date(value.value)
  date.setDate(date.getDate() + 1)
  value.value = date.getTime()
}

const show = ref(false)
function handleClose() {
  show.value = false
}
const valueStr = computed(() => {
  if (mode.value === 'day') {
    return uni.$uv.timeFormat(value.value, 'yyyy/mm/dd')
  } else if (mode.value === 'month') {
    return uni.$uv.timeFormat(value.value, 'yyyy/mm')
  } else {
    return uni.$uv.timeFormat(value.value, 'yyyy/mm/dd')
  }
})
const formatter = (type, value) => {
  switch (type) {
    case 'year':
      return value + '年'
    case 'month':
      return value + '月'
    case 'date':
      return value + '日'
    case 'hour':
      return value + '时'
    case 'minute':
      return value + '分'
    default:
      return value
  }
}
const preStepMonth = () => {
  const date = new Date(value.value)
  console.log(date, '22')
  date.setMonth(date.getMonth() - 1)
  value.value = date.getTime()
}
const nextStepMonth = () => {
  const date = new Date(value.value)
  date.setMonth(date.getMonth() + 1)
  value.value = date.getTime()
}

const startTime = ref(uni.$uv.timeFormat(new Date().getTime(), 'yyyy/mm/dd'))

const endTime = ref(uni.$uv.timeFormat(new Date().getTime(), 'yyyy/mm/dd'))

const pickerModel = ref('start')

const pickerValue = ref(new Date(startTime.value))

function changePicker(type: string, value: string) {
  pickerModel.value = type
  pickerValue.value = new Date(value)
}

function handlePickerChange({ value }) {
  if (pickerModel.value !== 'start') {
    endTime.value = uni.$uv.timeFormat(value, 'yyyy/mm/dd')
  } else {
    startTime.value = uni.$uv.timeFormat(value, 'yyyy/mm/dd')
  }
}
</script>

<template>
  <view class="bg-white p-[10px]" @click="show = true">
    <view v-if="mode === 'day'" class="flex items-center justify-center">
      <view>
        <wd-button type="text" class="!h-[20px] !bg-[#f8f8f8]" @click.stop="preStepDay">
          <wd-icon name="arrow-left" size="16px" color="#333" />
        </wd-button>
      </view>
      <view class="mx-4 flex items-center">
        <wd-text
          :text="`${valueStr}${isToday ? ' (今日)' : isYesterday ? ' (昨日)' : ''}`"
          color="#333"
        />
        <wd-icon name="fill-arrow-down" size="18px" class="ml-1" color="#666" />
      </view>
      <view>
        <wd-button
          type="text"
          class="!h-[20px]"
          :class="isToday ? ' !bg-[#f7f7f7]' : '!bg-[#f8f8f8]'"
          :disabled="isToday"
          @click.stop="nextStepDay"
        >
          <wd-icon name="arrow-right" size="16px" :color="isToday ? '#909193' : '#333'" />
        </wd-button>
      </view>
    </view>
    <view v-if="mode === 'month'" class="flex items-center justify-center">
      <view>
        <wd-button type="text" class="!h-[20px] !bg-[#f8f8f8]" @click.stop="preStepMonth">
          <wd-icon name="arrow-left" size="16px" color="#333" />
        </wd-button>
      </view>
      <view class="mx-4 flex items-center">
        <wd-text
          :text="`${valueStr}${isThisMonth ? ' (本月)' : isLastMonth ? ' (上月)' : ''}`"
          color="#333"
        />
        <wd-icon name="fill-arrow-down" size="18px" class="ml-1" color="#666" />
      </view>
      <view>
        <wd-button
          type="text"
          class="!h-[20px]"
          :class="isThisMonth ? ' !bg-[#f7f7f7]' : '!bg-[#f8f8f8]'"
          :disabled="isThisMonth"
          @click.stop="nextStepMonth"
        >
          <wd-icon name="arrow-right" size="16px" :color="isThisMonth ? '#909193' : '#333'" />
        </wd-button>
      </view>
    </view>
    <template v-if="mode === 'custom'">
      <view class="flex items-center justify-center">
        <wd-text :text="startTime" color="#333" />
        <view class="mx-2">
          <wd-text text="-" size="14px" color="#333" />
        </view>
        <wd-text :text="endTime" color="#333" />
        <wd-icon name="fill-arrow-down" size="18px" class="ml-1" color="#666" />
      </view>
    </template>
  </view>
  <wd-popup
    v-model="show"
    position="bottom"
    custom-style="border-radius:16rpx  16rpx 0  0;"
    @close="handleClose"
  >
    <view>
      <view class="flex items-center justify-between px-4 pt-2">
        <wd-button type="text">取消</wd-button>
        <wd-text text="时间范围" class="flex-1 text-center" color="#333" size="14" />
        <wd-button type="text" @tap="show = false">确定</wd-button>
      </view>
      <uv-line />
      <view class="p-[10px]">
        <wd-radio-group v-model="mode" shape="button">
          <wd-radio value="day">日</wd-radio>
          <!--          <wd-radio value="week">周</wd-radio>-->
          <wd-radio value="month">月</wd-radio>
          <wd-radio value="custom">自定义</wd-radio>
        </wd-radio-group>
      </view>
      <view>
        <template v-if="mode === 'day'">
          <wd-datetime-picker-view
            :formatter="formatter"
            v-model="value"
            label="日期选择"
            type="date"
            :maxDate="new Date().getTime()"
          />
        </template>
        <template v-if="mode === 'month'">
          <wd-datetime-picker-view
            :formatter="formatter"
            v-model="value"
            label="日期选择"
            type="year-month"
            :maxDate="new Date().getTime()"
          />
        </template>
        <template v-if="mode === 'custom'">
          <view class="flex items-center justify-center mt-6">
            <view
              class="w-[20%]"
              :class="`${pickerModel === 'start' ? ' border-b-1 border-b-primary border-b-solid' : ''}`"
              @click="changePicker('start', startTime)"
            >
              <wd-input
                v-model="startTime"
                no-border
                readonly
                :custom-input-class="`${pickerModel === 'start' ? '!text-primary' : ''} text-right`"
              />
            </view>
            <view class="mx-6 h-[1px] w-[20px] bg-[#D9D9D9]" />
            <view
              :class="`${pickerModel === 'end' ? ' border-b-1 border-b-primary border-b-solid' : ''}`"
              class="w-[20%]"
              @click="changePicker('end', endTime)"
            >
              <wd-input
                v-model="endTime"
                no-border
                readonly
                :custom-input-class="`${pickerModel === 'end' ? '!text-primary' : ''} text-right`"
              />
            </view>
          </view>
          <view>
            <wd-datetime-picker-view
              v-model="pickerValue"
              label="日期选择"
              :formatter="formatter"
              @change="handlePickerChange"
              type="date"
              :maxDate="new Date().getTime()"
            />
          </view>
        </template>
      </view>
    </view>
    <AppSafeBottom />
  </wd-popup>
</template>
